.commonts-all {
    // height: 300px;
    // margin-top: 100px;
    width: 100%;
    // background-color: red;

    .commonts-header {
        margin-top: 15px;
        width: 100%;
        height: 50px;
        // background-color: #ffc0cb;


        // justify-content: center;
        // align-items: center;
        // background-color: #fff;
        .header-info {
            margin-top: 10px;
            display: flex;

            .info-img {
                width: 45px;
                height: 45px;
                margin-left: 10px;
                // background-color: #fff;

                img {
                    object-fit: cover;
                    border-radius: 50%;
                    width: 100%;
                    // height: 20%;
                }
            }

            .info-all {
                margin-left: 12px;
                // display: flex;
                // align-items: center;
                // justify-content: center;
                height: 50px;

                // font-size: 24px;
                .info-username {
                    font-size: 16px;
                    height: 30px;
                    // background-color: blue;
                }

                .info-time {
                    height: 20px;
                    // background-color: yellow;
                }

                // flex-wrap: nowrap;
            }
        }

    }

    .commonts-main {
        width: 100%;
        // height: 20px;
        margin-top: 10px;
        // margin-left: 5px;
        // margin-right: 50px;
        // background-color: red;

        .commonts-main-text {
            width: 350px;
            flex-wrap: wrap;
            margin: 0 auto;
            font-size: 18px;
        }

        .main-img {
            margin-top: 10px;
            display: flex;
            margin-bottom: 5px;
            // justify-content: center;

            .img-big{
                margin-left: 12px;
                width: 250px;
                height: 180px;
                margin-right: 2px;
                background-color: pink;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .log{
                height: 2px;

            }
            .img1{
                height: 89px;
                width: 100px;
                background-color: blue;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
    }

    .commonts-footer {
        width: 100%;
        height: 40px;
        // background-color: green;
        display: flex;
        align-items: center;
        margin-left: 10px;

        .footer-friends {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 60px;
        }

        .interaction {
            margin-left: 8px;
            display: flex;
            justify-content: center;
            align-self: center;

            .one-img {
                width: 20px;
                height: 20px;

                // background-color: red;
                // margin: 5px;
                svg {
                    width: 100%;
                    height: 100%;
                }
            }

            .one-text {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 3px;
                // margin: ;
                width: 15px;
                height: 20px;
                // background-color: white;
            }

            .one-text1 {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 3px;
                // margin: ;
                width: 25px;
                height: 20px;
                // background-color: white;
            }

        }
        .interaction-good {
            margin-left: 8px;
            display: flex;
            justify-content: center;
            align-self: center;

            .one-img {
                width: 20px;
                height: 20px;

                // background-color: red;
                // margin: 5px;
                svg {
                    width: 100%;
                    height: 100%;
                }
            }

            .one-text {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 3px;
                // margin: ;
                width: 15px;
                height: 20px;
                // background-color: white;
            }

            .one-text1 {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 3px;
                // margin: ;
                width: 25px;
                height: 20px;
                // background-color: white;
            }

        }

    }
}